<!-- 修改身份策略 -->
<template>
    <custom-dialog title="批量修改身份策略" size="large" @dialogClose="dialogTableClose">
        <div>
            <div class="addDiv" style="margin-bottom: 20px">
                <span>
                    配置分类 ：
                    <el-select v-model="pzfl" placeholder="请选择" style="width: 200px">
                        <el-option label="定时通断点" value="shanghai"></el-option>
                        <el-option label="定时通断点2" value="beijing"></el-option>
                    </el-select>
                </span>
            </div>

            <custom-button type="add" @addClick="addClick"></custom-button>

            <el-table :data="tableData" style="width: 100%; margin-top: 20px" height="400">
                <el-table-column fixed prop="huilu" label="路号" width="100">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.huilu" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="供电时间" width="135">
                    <template slot-scope="scope">
                        <el-time-picker v-model="scope.row.startTime" placeholder="供电时间" format="HH:mm" style="width: 120px">
                        </el-time-picker>
                    </template>
                </el-table-column>
                <el-table-column prop="endTime" label="断点时间" width="135">
                    <template slot-scope="scope">
                        <el-time-picker v-model="scope.row.endTime" placeholder="断点时间" format="HH:mm" style="width: 120px">
                        </el-time-picker>
                    </template>
                </el-table-column>
                <el-table-column prop="zhouqi" label="重复周期">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.zhouqi" multiple placeholder="请选择" style="width: 510px">
                            <el-option v-for="item in zqOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="50">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row, scope.$index)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div style="text-align: right; margin-top: 20px">
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button @click="dialogTableClose">取消</el-button>
            </div>
        </div>
    </custom-dialog>
</template>

<script>
import customDialog from '@/components/customComponents/customDialog'
import {editTableForm} from '@/assets/form/controlCenter/editTable'
import customButton from '@/components/customComponents/customForm/customButton'
export default {
    name: 'updateCeLue',
    props: {
        item: {
            type: Array,
            required: false
        }
    },
    components: {customDialog, customButton},
    data() {
        return {
            pzfl: 'shanghai',
            zqOptions: [
                {
                    value: '1',
                    label: '星期一'
                },
                {
                    value: '2',
                    label: '星期二'
                },
                {
                    value: '3',
                    label: '星期三'
                },
                {
                    value: '4',
                    label: '星期四'
                },
                {
                    value: '5',
                    label: '星期五'
                },
                {
                    value: '6',
                    label: '星期六'
                },
                {
                    value: '7',
                    label: '星期天'
                }
            ],
            options: [
                {
                    value: '1',
                    label: '1'
                },
                {
                    value: '2',
                    label: '2'
                }
            ],
            value: '1',
            tableType: 'add',
            formTableConfig: editTableForm,
            tableItem: {
                huilu: '1',
                startDate: '2015-01-02',
                endDate: '2025-01-06',
                startTime: '11:12',
                endTime: '14:12',
                zhouqi: '1',
                id: 1
            },
            tableData: [
                {
                    huilu: '1',
                    startDate: '2015-01-02',
                    endDate: '2025-01-06',
                    startTime: '11:12',
                    endTime: '14:12',
                    zhouqi: '1',
                    id: 1
                },
                {
                    huilu: '1',
                    startDate: '2015-01-02',
                    endDate: '2025-01-06',
                    startTime: '11:12',
                    endTime: '14:12',
                    zhouqi: '1',
                    id: 2
                }
            ]
        }
    },
    computed: {},
    created() {},
    methods: {
        onSubmit() {
            this.$emit('close', '')
        },
        addClick() {
            var item = this.tableItem
            item.id = Math.random() * 10000
            this.tableData.push(item)
        },
        handleClick(row, index) {
            this.tableData.splice(index, 1)
        },
        formInputChange(e) {
            console.log(e)
        },
        dialogTableClose() {
            this.$emit('close', '')
        },
        tableSubmit(d) {
            console.log(d)
        }
    }
}
</script>

<style lang="scss" scoped>
.editTable {
}
</style>
